<template>
  <div id="homemusictop">
    <div id="box"><MusicTopName></MusicTopName></div>
    <div id="box2"><MusicNavigBar></MusicNavigBar></div>
    <div id="box3"><MusicSearch></MusicSearch></div>
    <div id="box"><MusicUser></MusicUser></div>
  </div>
</template>

<script>
import MusicTopName from './musicTopCh/MusicTopName.vue'
import MusicNavigBar from './musicTopCh/MusicNavigBar.vue'
import MusicSearch from './musicTopCh/MusicSearch.vue'
import MusicUser from './musicTopCh/MusicUser.vue'

export default {
  name: 'HomeMusicTop',
  components: {
    MusicTopName,
    MusicNavigBar,
    MusicSearch,
    MusicUser
  }

}
</script>

<style>
#box {
  width: 17vw;
  height: 8vh;
}
#box2 {
  width: 5vw;
  height: 8vh;
}
#box3 {
  width: 35vw;
  height: 8vh;
}
#homemusictop {
  width: 75vw;
  height: 8vh;
  /* border-bottom:rgb(150, 150, 150) solid 1px; */
  box-shadow: 0px 1px 3px rgb(197, 197, 197);

  border-radius: 1rem 1rem 0 0 ;
  display: flex;
  justify-content:space-between;
}
</style>